<template>
	<view>
	<u-popup
		mode="bottom"
		bgColor="transparent"
		closeable
		zIndex="9"
		:safeAreaInsetBottom="false"
		:show="showCollection"
		@close="closeCollection">
		<view class="collection-popup">
			<view class="collection-popup-title main-flex">常购收藏</view>
			<view class="collection-popup-tabs main-flex">
				<u-tabs
					lineColor="#e3230e"
					lineWidth="90rpx"
					:itemStyle="{
						height: '36px',
						fontSize: '32rpx',
						padding: '0 80rpx'
					}"
					:inactiveStyle="{
						color: '#333333'
					}"
					:activeStyle="{
						color: '#e3230e',
						fontWeight: '600'
					}"
					:scrollable="false"
					:list="tabList"
					@click="clickTab"></u-tabs>
			</view>
			<view class="collection-popup-content" @touchmove.stop.prevent>
				<scroll-view class="collection-list" scroll-y>
					<view class="collection-list-box">
						<view class="collection-item" v-for="(item, index) in tableList" :key="item.id">
							<view class="collection-item-content main-flex">
								<view class="collection-item-goods main-flex-item main-flex">
									<view class="collection-item-goods-img">
										<image
											class="collection-item-goods-img-url"
											mode="aspectFill"
											:src="imgUrl(item.productImg)"></image>
									</view>
									<view class="collection-item-goods-r main-flex-item main-flex">
										<view class="collection-item-goods-name">{{item.productName}}</view>
										<view class="collection-item-goods-regions main-flex">
											<view class="collection-item-goods-region">配送区域：{{arrText(setStore.provinceList, item.regionCode)}}</view>
										</view>
										<view class="collection-item-goods-other main-flex">
											<view class="collection-item-goods-price price">￥{{moneyStr(item.productPrice)}}</view>
											<uni-badge
												class="collection-item-goods-car"
												:customStyle="{background: '#e3230e'}"
												:text="item.count"
												absolute="rightTop"
												:offset="[0, 0]"
												size="small">
												<image class="collection-item-goods-car-icon" @click="chooseGoods(item)" src="/static/images/car.png"></image>
											</uni-badge>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view
							v-if="isNull"
							class="null main-flex">
							<u-empty :text="`${type===1?'收藏夹是空的哟~，快去收藏吧':'还没有常购商品哟~，快去购买吧'}`" icon="/static/images/null.png"></u-empty>
							<view class="null-btn" @click="goBuy">去逛逛</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</u-popup>
	<!--商品弹窗-->
	<!-- <goods-popup
	@close="closeGoods"
	@add="addGoods"
	:showGoods="showGoods"
	:goods="goodsInfo"></goods-popup> -->
	</view>
</template>

<script setup>
  /**
   * ChooseCollection 选择地址
   * @description 选择地址
   * @property {Object} total 购物车计算信息
   * @event {Function} close 关闭
   */
	import { computed, onMounted, ref, watch } from "vue"
	import useUserStore from "@/store/modules/user"
	import useSetStore from '@/store/modules/set'
	import modal from '@/plugins/modal'
	import { arrText } from "@/utils/ty"
	import { oftenBuyCollection } from "@/api/app_api/user"
	import { productInfo } from "@/api/app_api/product"
	import { customerCarAdd } from "@/api/app_api/car"
	
	const userStore = useUserStore()
	const setStore = useSetStore()
	const props = defineProps({
		showCollection: {
			type: Boolean,
			default: false 
		},
		carList: {
			type: Array,
			default: []
		}
	})
	
	const emits = defineEmits(['close', 'addCar'])
	const closeCollection = () => {
		emits('close', false)
	}
	
	const tabList = ref([
		{ type: 0, name: '常购' },
		{ type: 1, name: '收藏' }
	])
	const type = ref(0)
	const clickTab = (e) => {
		type.value = e.type
		isNull.value = false
		getList()
	}
	
	const tableList = ref([])
	const isLoading = ref(false)
	const isNull = ref(false)
	const getList = () => {
		isLoading.value = true
		oftenBuyCollection({
			type: type.value
		}).then(res => {
			tableList.value = res.data || []
			setList()
			isNull.value = tableList.value.length === 0
			isLoading.value = false
		}).catch(() => {
			isLoading.value = false
			isNull.value = true
		})
	}
	const setList = () => {
		tableList.value = tableList.value.map(item => {
			return {
				...item,
				count: props.carList.filter(i => i.productId === item.productId)?.[0]?.productNumber || 0
			}
		}) || []
	}
	// 去看看
	const goBuy = () => {
		uni.switchTab({
			url: '/pages/category/category'
		})
	}
	
	// 选择商品
	const showGoods = ref(false)
	const goodsInfo = ref({})
	const chooseGoods = (item) => {
		productInfo({
			sellChannel: userStore.sellChannel,
			productId: item.productId
		}).then(res => {
			if (res?.data) {
				// showGoods.value = true
				// goodsInfo.value = res.data
				if (res.data.status === 1 && res.data.regionCode == userStore.regionCode) {
					addCar({
						moreSpec: res.data.moreSpec,
						productId: res.data.id,
						productImg: res.data.image,
						productName: res.data.name,
						productNumber: 1,
						productPrice: res.data.sellPrice,
						regionCode:  res.data.regionCode,
						sellChannel: userStore.sellChannel
					})
				} else {
					uni.$u.toast('商品已下架')
				}
			} else {
				uni.$u.toast('商品信息错误')
			}
		})
	}
	
	const addCar = (params) => {
		customerCarAdd(params).then(res => {
			emits('addCar', params)
		})
	}
	
	
	const closeGoods = () => {
		showGoods.value = false
		goodsInfo.value = {}
	}
	// const addGoods = (res) => {
	// 	emits('addCar', res)
	// }
	
	watch(() => props.showCollection, (nval, oval) => {
		if (nval) {
			getList()
		}
	})
	watch(() => props.carList, (nval, oval) => {
		if (nval) {
			setList()
		}
	})
	
	onMounted(() => {
		getList()
	})
</script>

<style lang="scss" scoped>
  .collection-popup {
		// border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #ffffff;
		padding-bottom: calc(var(--window-bottom) + 100rpx);
		&-title {
			height: 48px;
			font-size: 16px;
			font-weight: 600;
			text-align: center;
			justify-content: center;
			padding: 0 15px;
		}
		&-content {
			background-color: #f5f5f5;
			padding: 0 15px;
		}
		&-tabs {
			width: 100%;
			height: 36px;
			justify-content: center;
		}
		.collection {
			&-list {
				height: 680rpx;
				&-box {
					padding: 20rpx 0;
				}
			}
			&-item {
				background-color: #ffffff;
				border-radius: 20rpx;
				overflow: hidden;
				&+.collection-item {
					margin-top: 20rpx;
				}
				&-content {
					align-items: flex-start;
					padding: 20rpx 0;
					transition: all .3s;
				}
				&-goods {
					align-items: flex-start;
					margin-left: 20rpx;
					&-img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
						overflow: hidden;
						&-url {
							width: 100%;
							height: 100%;
						}
					}
					&-r {
						min-height: 160rpx;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
						padding: 0 20rpx;
					}
					&-name {
						width: 100%;
						font-size: 26rpx;
						font-weight: 600;
					}
					&-region {
						font-size: 24rpx;
						color: #ffffff;
						margin-top: 4rpx;
						background-color: #999999;
						border-radius: 4rpx;
						padding: 0 6rpx;
					}
					&-other {
						width: 100%;
						margin-top: 4rpx;
					}
					&-price {
						font-size: 26rpx;
						font-weight: 600;
					}
					&-car {
						margin-left: auto;
						margin-right: 20rpx;
						&-icon {
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
			}
		}
	}
</style>
